<template>
  <div class="h-100">
    <div class="flex align-center justify-between">
      <span class="text-16">{{ treeData.title }}</span>

      <div class="flex align-center gc-8">
        <a-button type="priamry" ghost size="small" @click="preview">预览</a-button>
        <appstore-outlined class="text-16" />
      </div>
    </div>
    <a-divider style="background-color: #666"></a-divider>

    <div>
      <div class="flex justify-between">
        <div class="flex gc-2">
          <a-button size="small" @click="config.show = true">新建表头</a-button>
          <a-button size="small" @click="dialog = true" ghost>新建数据</a-button>
        </div>
        <div class="flex gc-2">
          <a-button type="danger" ghost size="small" @click="deleteValues">删除数据</a-button>
          <a-button type="danger" size="small" @click="deleteHeaders">彻底清空</a-button>
        </div>
      </div>
    </div>
    <div class="relative">
      <InTable
        :title="treeData.title"
        v-model:headers="treeData.headers"
        v-model:values="treeData.values"
        class="mt-4"
        :key="treeData.headers"
        plain
      />

      <InDialog theme="light" v-model:show="dialog" title="编辑数据">
        <div>
          <div v-if="treeData.headers.length > 0" class="flex flex-col gr-2">
            <InListItem theme="light" class="mb-4">
              <div>列名</div>
              <div>
                <a-input
                  v-model:value="columnName"
                  size="small"
                  style="width: 120px"
                  @pressEnter="saveData"
                ></a-input>
              </div>
            </InListItem>
            <InListItem v-for="item in treeData.headers" theme="light">
              <div>
                {{ item.key }}
              </div>
              <div>
                <a-input
                  size="small"
                  v-model:value="item.tempValue"
                  style="width: 120px"
                  :placeholder="item.tips"
                  @pressEnter="saveData"
                ></a-input>
              </div>
            </InListItem>
          </div>
          <div class="flex flex-s" v-else>
            <InEmpty width="100" desc="表头为空,不能编辑数据" />
          </div>
        </div>
        <a-button type="primary" size="small" class="mt-4 mb-4 w-100" @click="saveData">
          保存
        </a-button>
      </InDialog>

      <!-- 新的表单 -->
      <InDialog v-model:show="config.show" title="添加表头">
        <div class="flex gr-4 flex-col">
          <InListItem theme="light">
            <div>表头名</div>
            <div>
              <a-input
                size="small"
                @pressEnter="addNewHeader"
                style="width: 120px"
                v-model:value="config.key"
              ></a-input>
            </div>
          </InListItem>
          <InListItem theme="light">
            <div>排序</div>
            <div>
              <a-select
                size="small"
                v-model:value="config.sort"
                :options="sortOptions"
                style="width: 120px"
              >
              </a-select>
            </div>
          </InListItem>
          <InListItem theme="light">
            <div>
              填写提示
              <a-tooltip>
                <template #title> 填写表格的时候会给出这个提示信息 </template>
                <InfoCircleOutlined />
              </a-tooltip>
            </div>
            <div>
              <a-input
                style="width: 120px"
                placeholder="请给出提示信息"
                v-model:value="config.tips"
                size="small"
              ></a-input>
            </div>
          </InListItem>
          <InListItem theme="light">
            <div>默认值</div>
            <div>
              <a-input
                style="width: 120px"
                placeholder="默认值"
                size="small"
                v-model:value="config.value"
              ></a-input>
            </div>
          </InListItem>
        </div>

        <div class="mt-4 text-right">
          <a-button block type="primary" size="small" @click="addNewHeader">添加</a-button>
        </div>
      </InDialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { addEvent, uuid } from "@/utils/utils";
import { computed, onMounted, ref } from "vue";
import { setProp, treeBus } from "../bus/treeData";

import { tableDataType, tableItemType, tableValueType } from "@/types/mode-type";
import InDialog from "../components/InDialog.vue";
import InListItem from "../components/InListItem.vue";
import InTable from "../components/InTable.vue";
import { InfoCircleOutlined } from "@ant-design/icons-vue";
import InEmpty from "../components/InEmpty.vue";

/* 核心数据 */
const treeData = computed(() => {
  return treeBus.selectItem;
});

const deleteValues = () => {
  treeData.value.values = [];
};

const deleteHeaders = () => {
  treeData.value.headers = [];
  deleteValues();
};
const columnName = ref();
/* 保存数据的同时，给其他没有赋值的项赋值 */
const saveData = () => {
  if (!columnName.value) {
    columnName.value = treeData.value.values.length+1
  }

  var headers = treeData.value.headers;

  var values = headers.map((item: tableItemType) => {
    item.value = item.tempValue;
    return {
      value: item.value,
      key: item.key,
      id: item.id
    };
  });

  treeData.value.values.push({
    column: columnName.value,
    data: values
  });
  dialog.value = false;
  /* 清理列名 */
  columnName.value = "";

  /* 清理临时数据 */
  headers.map((item: tableItemType) => {
    item.tempValue = "";
  });
};
const dialog = ref(false);

const dynamicInput = ref({
  x: 0,
  y: 0,
  w: 0,
  h: 0,
  show: false,
  value: undefined as any,
  id: "",
  key: ""
});

onMounted(() => {
  addEvent(window, "resize", () => {
    dynamicInput.value.show = false;
  });
});

/* 预览整个文件下的配置  */
const preview = () => {
  setProp(treeBus.selectItem);
};

/**
 * todo:添加新的表头
 *
 */

const addNewHeader = () => {
  if (config.value.key === "") {
    config.value.show = false;
    return;
  }
  treeData.value.headers.push(config.value);
  treeData.value.values.filter((item: tableValueType) => {
    item.data.push(config.value);
  });
  config.value.show = false;
  config.value = {
    key: "",
    sort: 1,
    tips: "",
    value: "",
    id: uuid(),
    show: false
  };
};

const sortOptions = [
  {
    value: 1,
    label: "最前面"
  },
  {
    value: 1000,
    label: "最后面"
  }
];
const config = ref({
  key: "",
  sort: 1,
  tips: "",
  value: "",
  id: uuid(),
  show: false
});
</script>

<style lang="scss" scoped></style>
